<template>
  <view class="indexkdPage" @click="close">
    <view class="banner">
      <!-- 顶部背景 -->
      <u-navbar
        title="宽带报装"
        style="position: relative; z-index: 1"
        :fixed="false"
        :autoBack="true"
        :bgColor="'transparent'"
        :titleStyle="{
          color: '#fff',
          fontSize: '16px',
        }">
        <!-- 左侧扫码按钮 -->
        <template #left>
          <view class="scan-btn">
            <u-icon name="arrow-left" color="#fff" size="20"></u-icon>
          </view>
        </template>
      </u-navbar>
      <image
        mode="widthFix"
        src="../../static/index/kuan.png"
        class="bannerImg"></image>
    </view>
    <view class="contents">
      <view class="hite">
        <u--input
          placeholder="请输入套餐标题搜索"
          border="none"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #49A1FD"
          v-model="keywords"></u--input>
        <view class="search" @click="queryList(1, 10)">搜索</view>
      </view>
      <view class="listcont">
        <!-- 筛选区域 -->
        <view class="filter-tabs">
          <view class="tab-list">
            <view
              class="tab-item"
              v-for="(item, index) in filterTabs"
              :key="index"
              @click.stop="handleTabClick(index)">
              <text :class="['tab-text', currentTab === index ? 'active' : '']">
                {{ item.name }}
              </text>
              <u-icon
                :name="currentTab === index ? 'arrow-up' : 'arrow-down'"
                size="12"
                :color="currentTab === index ? '#2979ff' : '#666'"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <z-paging
        ref="paging"
        v-model="list"
        @query="queryList"
        slot="bottom"
        :fixed="false"
        :paging-style="{ height: '60vh' }">
        <view class="list_kd">
          <view
            class="lists"
            @click="handleDetail(item)"
            v-for="(item, index) in list"
            :key="index">
            <image mode="widthFix" :src="item.image" class="img"></image>
            <view class="right">
              <view class="title">{{ item.taocan }}</view>
              <view class="small">{{ item.taocan_type }}</view>
              <view class="bottom">
                <view class="search">{{ item.yunying_text }}</view>
                <view class="price">￥{{ item.jiben_price }}</view>
              </view>
            </view>
          </view>

          <!-- 32 -->
        </view>
      </z-paging>
    </view>

    <uni-popup ref="popup" style="background-color: #ffffff" @change="change">
      <view class="filter_box" style="background-color: #ffffff">
        <view class="dropdown-content">
          <view class="content">
            <view class="option-list">
              <view
                class="option-item"
                v-for="(option, idx) in filterTabs[currentTab].options"
                :key="idx"
                @click="selectOption(option)">
                <text
                  :class="[
                    'option-text',
                    filterTabs[currentTab].value === option.value
                      ? 'active'
                      : '',
                  ]">
                  {{ option.label }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  getarealist,
  getyunyingshanglist,
  getdatalist,
} from "@/api/mainapi.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      show: false,
      currentTab: 9,
      keywords: "",
      filterTabs: [
        {
          name: "区域",
          value: "",
          options: [
            {
              label: "全部",
              value: "all",
            },
            {
              label: "萧岗",
              value: "xiaogang",
            },
            {
              label: "城中村",
              value: "village",
            },
          ],
        },
        {
          name: "运营商",
          value: "",
          options: [
            {
              label: "移动",
              value: "all",
            },
            {
              label: "联通",
              value: "entire",
            },
            {
              label: "电信",
              value: "shared",
            },
          ],
        },
      ],
      tags: [],
      selectedTags: [],
      statusBarHeight: 0,
      columnsArea: [],
      list: [],
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad() {},
  mounted() {
    this.getArea();
    this.getyunyingshanglist();
    // this.getlist();
  },
  methods: {
    async queryList(pageNo, pageSize) {
      const res = await getdatalist({
        limit: pageSize,
        page: pageNo,
        keywords: this.keywords,
        area_id: this.filterTabs[0].value ? this.filterTabs[0].value : "",
        yunying_type: this.filterTabs[1].value ? this.filterTabs[1].value : "",
      });
      if (res.response.statusCode === 200) {
        if (res.data.data.data.length != 0) {
          this.$refs.paging.complete(res.data.data.data);
        } else {
          this.$refs.paging.complete(false);
        }

      }
    },
    async getArea() {
      const res = await getarealist();
      if (res.response.statusCode === 200) {
        this.filterTabs[0].options = res.data.data.map((key) => {
          return {
            value: key.areaid,
            label: key.arearname,
          };
        });
      }
    },
    async getyunyingshanglist() {
      const res = await getyunyingshanglist();
      if (res.response.statusCode === 200) {
        const vueReactiveArray = Object.keys(res.data.data).map((key) => {
          return {
            label: res.data.data[key],
            value: key,
          };
        });
        this.filterTabs[1].options = [...vueReactiveArray];
      }
    },
    async getlist() {
      const res = await getdatalist();
      if (res.response.statusCode === 200) {
        console.log(res.data.data, 23423);
        this.list = res.data.data.data;
      }
    },
    change(e) {
      this.show = e.show;
    },
    handleTabClick(index) {
      this.currentTab = index;
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    selectOption(option) {
      this.filterTabs[this.currentTab].value = option.value;
      this.filterTabs[this.currentTab].name = option.label;
      this.$refs.popup.close();
      this.queryList(1, 10);
    },

    handleDetail(id) {
      uni.navigateTo({
        url: "/pages/index/package?data=" + JSON.stringify(id),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.indexkdPage {
  .filter-tabs {
    left: 0;
    right: 0;
    position: fixed;
    z-index: 999999;
    background-color: #ffffff;

    .tab-list {
      display: flex;
      padding: 24rpx 0;

      .tab-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .tab-text {
          font-size: 28rpx;
          color: #333;
          margin-right: 8rpx;

          &.active {
            color: #2979ff;
          }
        }
      }
    }
  }
  .banner {
    width: 100%;
    z-index: 0;
    height: 498rpx;
    /deep/ .u-navbar {
      position: relative;
      z-index: 1;
    }
  }
  .bannerImg {
    width: 100%;
    position: absolute;
    margin-top: -192rpx;
  }
  .listcont {
    margin-top: 20rpx;
  }
  .contents {
    position: absolute;
    background: #fff;
    width: 100%;
    border-radius: 24rpx;
    margin-top: -30rpx;
    z-index: 9;
    padding: 0 36rpx;
    box-sizing: border-box;
    /* 隐藏图标 */
    /deep/ .u-notice__left-icon {
      display: none;
    }
  }
  .hite {
    background: #f1f8ff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx;
    margin-top: 30rpx;
    justify-content: space-between;
    .search {
      width: 104rpx;
      height: 52rpx;
      background: #49a1fd;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 52rpx;
      text-align: center;
    }
  }

  .list {
    width: 25%;
    text-align: center;
    margin-top: 46rpx;
    // margin-right: 46rpx;
    .name {
      font-size: 26rpx;
      margin-top: 10rpx;
    }
    .imgs {
      width: 96rpx;
      height: 96rpx;
    }
  }
  .platform {
    display: flex;
    justify-content: space-between;
    margin-top: 44rpx;
    .platformImg {
      width: 320rpx;
      height: 176rpx;
    }
  }
  .list_kd {
    margin-top: 120rpx;
  }
  .lists {
    padding: 18rpx 20rpx;
    background: #fff;
    display: flex;
    margin-top: 20rpx;
    box-sizing: border-box;
    border-bottom: 1px #e6e5e5 solid;
    .img {
      width: 116rpx;
    }
    .right {
      width: 70%;
      margin-left: 20rpx;
      align-items: center;
      padding-bottom: 10rpx;
      .bottom {
        display: flex;
        justify-content: space-between;
        .price {
          color: #f60000;
          font-size: 32rpx;
        }
        .search {
          width: 100rpx;
          height: 36rpx;
          background: #49a1fd;
          border-radius: 8rpx;
          font-family: PingFangSC, PingFang SC;
          font-size: 22rpx;
          color: #ffffff;
          line-height: 36rpx;
          text-align: center;
        }
      }
      .title {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
        text-align: left;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
      }
      .small {
        color: #999999;
        line-height: 34rpx;
        text-align: left;
        font-size: 24rpx;
      }
    }
  }
  /deep/ .uni-popup {
    width: 100%;
  }
  .dropdown-content {
    width: 100%;
    margin-top: 180rpx;
    .content {
      width: 100%;
      position: relative;
      background-color: #fff;
      z-index: 99;
      border-radius: 0 0 16rpx 16rpx;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

      .option-list {
        padding: 20rpx 0;
        .tags-list {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          margin-bottom: 24rpx;

          .tag-item {
            padding: 12rpx 24rpx;
            font-size: 24rpx;
            color: #666;
            background: #f5f5f5;
            border-radius: 4rpx;

            &.active {
              color: #2979ff;
              background: rgba(41, 121, 255, 0.1);
            }
          }
        }
        .type_cz {
          padding: 0 30rpx;
          .title {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
            margin-top: 20rpx;
          }
        }
        .option-item {
          padding: 20rpx 32rpx;

          .option-text {
            font-size: 26rpx;
            color: #666666;

            &.active {
              color: #2979ff;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
